import React, { useState, useEffect, useCallback } from 'react'
import { DatePicker, Button, Form, Select } from 'antd'
import { QuestionCircleOutlined } from '@ant-design/icons'
import { FilterContainer } from '@/appComponents/Filter'
import {
  SearchOutlined,
  DownloadOutlined,
  UploadOutlined
} from '@ant-design/icons'
import { getAdmList } from '&/api/electricity'
import dayjs from 'dayjs'

const Filter = ({
  onQuery,
  paramsData,
  setParamsData,
  timeList,
  historyId,
  setHistoryId,
  submitHistoryTable,
  onDownloadExcel
}) => {
  const [countValues, setCountValues] = useState([])
  const onQueryChange = (v) => {
    setParamsData((state) => {
      state.county_id = v
      return {
        ...state
      }
    })
  }
  const click = () => {
    let newParamsData = {}
    for (let key in paramsData) {
      if (paramsData[key] != (-1 || '-1')) {
        newParamsData[key] = paramsData[key]
      }
    }
    onQuery && onQuery(newParamsData)
  }

  useEffect(() => {
    getAdmListRequest()
  }, [])
  // 区的接口
  const getAdmListRequest = async () => {
    const res = await getAdmList({ adm_level: '3' })
    res.unshift({ county_id: -1, county_name: '全部' })
    setCountValues(res)
  }

  return (
    <FilterContainer>
      <Form layout="inline">
        <Form.Item>
          <Select
            style={{
              width: 300,
              height: 35
            }}
            maxTagCount="responsive"
            value={historyId}
            onChange={(e) => {
              setHistoryId(e)
            }}
          >
            {timeList.length &&
              timeList.map((i) => {
                return (
                  <Select.Option key={i.history_id} value={i.history_id}>
                    {dayjs(i.start_time).format('YYYY-MM-DD HH') +
                      ' -- ' +
                      dayjs(i.end_time).format('YYYY-MM-DD HH')}
                  </Select.Option>
                )
              })}
          </Select>
        </Form.Item>
        <Form.Item label="区域选择">
          <Select
            placeholder={`请选择`}
            value={paramsData?.county_id}
            onChange={(v) => onQueryChange(v)}
          >
            {countValues &&
              countValues.map((item, index) => {
                return (
                  <Select.Option key={index} value={item.county_id}>
                    {item.county_name}
                  </Select.Option>
                )
              })}
          </Select>
        </Form.Item>
        <Form.Item>
          <Button
            onClick={() => {
              submitHistoryTable()
            }}
            icon={<UploadOutlined />}
            type="primary"
          >
            提交并保存到历史表格
          </Button>
        </Form.Item>
        <Form.Item>
          <Button
            icon={<DownloadOutlined />}
            type="primary"
            style={{ marginRight: '10px' }}
            onClick={() => {
              onDownloadExcel()
            }}
          >
            导出
          </Button>
        </Form.Item>
      </Form>
    </FilterContainer>
  )
}

export default Filter
